<script setup lang="ts">
const musicStore = useMusicStore();

const localMusicList = computed(() => musicStore.localMusicList);

const navActive = ref('musicList1');

function playMusic(path: string, musicList: AudiopalyRecord[]) {
  musicStore.setCurrentMusicList(musicList);
  uni.navigateTo({
    url: `/pages/audiopaly/index?path=${path}`
  });
}
</script>

<template>
  <view class="app-container">
    <bg-nav-list v-model="navActive">
      <bg-nav-item label="音乐列表" value="musicList1" />
    </bg-nav-list>
    <view class="music-list-box">

      <view class="music-list" v-if="navActive === 'musicList1'" >
        <view
            v-for="(music, index) in localMusicList"
            :key="index"
            class="music-item"
            :class="{'music-item-active': music.path == musicStore.currentMusic.path}"
            @click="playMusic(music.path, localMusicList)"
        >
          <view class="music-img">
            <image src="/static/image/audiopaly/music-a.png" mode="aspectFit"></image>
          </view>
          <view class="music-info">
            <text class="music-name">{{ music.musicName }}</text>
            <text class="music-author">{{ music.author || '未知' }}</text>
          </view>
        </view>
      </view>
    </view>
    <play-music-box class="play-music-mall" />
  </view>
</template>

<style scoped lang="scss">
.app-container {
  padding: 20rpx;
}

.music-list-box {
  display: flex;
  overflow-x: auto;
  margin-top: 20rpx;

  .music-list {
    min-width: 100%;
    .music-item {

      padding: 20rpx;
      border-bottom: 1rpx solid #eee;
      display: flex;
      align-items: center;

      .music-img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }

      .music-info {
        flex: 1;
      }
      &:last-child {
        border-bottom: none;
      }

      .music-name {
        font-size: 16px;
        color: #333;
        margin-right: 20rpx;
      }

      .music-author {
        font-size: 14px;
        color: #666;
      }
    }

    .music-item-active{

      .music-name{
        color: $uni-primary;
      }
      .music-author{
        color: $uni-primary;
      }
    }
  }
}
</style>